<!--
 * @Author: 周佳欣 1511452392@qq.com
 * @Date: 2023-03-06 18:08:25
 * @LastEditors: 周佳欣 1511452392@qq.com
 * @LastEditTime: 2023-03-06 18:46:13
 * @FilePath: \vue-project\src\views\SearchView.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <router-link to="/sort">
    <div class="search-left">
        <van-icon 
        size="25"
        name="" 
        @click="Sort"/>
        </div>
    </router-link>
        <van-search
        v-model="value"
        show-action
        placeholder="一加 Ace 2V"
        @search="onSearch"
        >
        <template #action>
            <div @click="onClickButton">搜索</div>
        </template>
        </van-search>
        <div class="search-label">
        <span class="hot">热门推荐</span>
        </div>
        <div class="search-button">
        <van-button color="linear-gradient(to right, #ed6a0c, #ee0a24)">
        一加 Ace 2V
        </van-button>
        </div>
        <div class="search-button">
        <van-button color="linear-gradient(to right, #ed6a0c, #ee0a24)">
        女神专场
        </van-button>
        </div>
        <div class="search-button1">
        <van-button color="linear-gradient(to right, #ed6a0c, #ee0a24)">
        Find N2 系列
        </van-button>
        </div>
        <div class="search-button">
        <van-button color="linear-gradient(to right, #ed6a0c, #ee0a24)">
        Reno9 系列
        </van-button>
        </div>
        <div class="search-button">
        <van-button color="linear-gradient(to right, #ed6a0c, #ee0a24)">
        一加新品耳机
        </van-button>
        </div>
</template>
<script setup>
import { ref } from "vue";
import Sort from "@/views/SortView.vue";
import { useRouter } from "vue-router";
</script>
<style>
.search-left {
    width: 30px;
    height: 46px;
    float: left;
    padding-left: 10px;
    padding-top: 10px;
}
.hot {
    height: 13px;
    width: 351.2px;
    font-size: 13px;
    color: #999999;
    float: left;
    padding-left: 14px;
    padding-top: 20px;
}
.search-button {
    height: 35px;
    width: 111.54px;
    font-size: 13px;
    float: left;
    padding-left: 10px;
    padding-top: 20px;
}
.search-button1 {
    height: 35px;
    width: 111.54px;
    font-size: 13px;
    float: left;
    /* padding-left: 5px; */
    padding-top: 20px;
}
</style>